<template>
	<div class="com-chart" ref="pie1_ref"></div>
</template>

<script>
	export default {
		name: 'Piechart1',
		data() {
			return {
				chartInstance: null,
				echartoption: {},
			}
		},
		mounted() {
			this.initChart();
			window.addEventListener("resize", () => {
				this.chartInstance.resize();
			});
		},
		destroyed() {
			window.removeEventListener("resize", () => {
				this.chartInstance.resize();
			});
		},
		methods: {
			initChart() {
				this.chartInstance = this.$echarts.init(this.$refs.pie1_ref);
				this.echartoption = {
					tooltip: {
						trigger: "item",
						formatter: "{a} <br/>{b}: {c} ({d}%)",
						position: function(p) {
							//其中p为当前鼠标的位置
							return [p[0] + 10, p[1] - 10];
						}
					},
					legend: {
						top: "90%",
						itemWidth: 10,
						itemHeight: 10,
						data: ["省级库款余额", "市级库款余额", "县级库款余额"],
						textStyle: {
							color: "rgba(255,255,255,.5)",
							fontSize: "12"
						}
					},
					series: [{
						name: "年龄分布",
						type: "pie",
						center: ["50%", "42%"],
						radius: ["40%", "60%"],
						color: [
							"#065aab",
							"#066eab",
							"#0682ab",
							"#0696ab",
							"#06a0ab",
							"#06b4ab",
							"#06c8ab",
							"#06dcab",
							"#06f0ab"
						],
						label: {
							show: false
						},
						labelLine: {
							show: false
						},
						data: [{
								value: 1,
								name: "省级库款余额"
							},
							{
								value: 4,
								name: "市级库款余额"
							},
							{
								value: 2,
								name: "县级库款余额"
							}
						]
					}]
				};
				this.chartInstance.setOption(this.echartoption);
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
